<template>
  <div class="header">
     <div class="top">
          <div class="header-back" @click="fun()"></div>
      <div class="xinxi">
         <span class="iconfont icon-xiaoxi"></span>
      </div>
      <h1>尊贵的会员</h1>
      <div class="textuser">
       <span class="title1">普通会员</span><span class="title2">我的社区</span>
      </div>
      <div class="btnuser"></div>
     </div>
     <div class="bottom"></div>
  </div>
</template>
<script>
export default {
    methods: {
        fun(){
            this.$router.go(-1)
        }
    },
};
</script>

<style scoped>
.top {
  width: 100%;
  height: 1.04rem;
  background: #4765d5 url(//pic.c-ctrip.com/platform/h5/my/home/photo_myctrip@2x_6.22.jpg) 0 0 no-repeat;
  display: flex;
  padding-top: .2rem;
  padding-left: .12rem;
  position: relative;
}
.header-back{
    background:url(https://pages.c-ctrip.com/you/livestream/tripshoot_forward%20_black@3x.png) no-repeat 50%;
    background-size: .24rem;
    width: .24rem;
    height: .24rem;
}
.xinxi{
    width: .33rem;
    height: .33rem;
    padding: 0 .01rem .06rem;
    margin-left: 3rem;
    
}
.xinxi span{
     font-size: .22rem;
     border-radius: 50%;
     color: #fff;
}
.header h1{
    padding-left: 1.03rem;
    position: absolute;  
    top: .53rem;
    left: 0;
    color: #fff;
    font-size: .17rem;
    font-weight: 300;
}
.top .textuser{
    width: 100%;
   height: .48rem;
   position: absolute;
   bottom: -0.35rem;
   left: 0rem;
   background: #fff;
   line-height: .48rem;
   border-radius: .12rem .12rem 0 0;
   padding-left: 1.03rem;
}
.top .textuser:before {
    position: absolute;
    left: 16px;
    right: 16px;
    bottom: 0;
    content: '';
    height: 1px;
    background: #efefef;
    }
.title1{
    background: rgba(17,166,255,0.1);
    color: #5e8aa6;
    padding: .05rem;
    border-radius: .1rem;
    margin-right: .1rem;
}
.title2{
    background: rgba(247,148,100,0.15);
    color: #967363;
     padding: .03rem 0.05rem;
     border-radius: .1rem;
}
.btnuser{
    position: absolute;
    z-index: 14;
    left: .16rem;
    top: .56rem;
    width: .72rem;
    height: .72rem;
    background:url(https://dimg04.c-ctrip.com/images/t1/headphoto/424/398/503/0386f569fd0d4b488ff41b64bbc5743b_C_100_100.jpg) 0 0 no-repeat ;
    background-size: .72rem .72rem;
    border-radius: 50%;
    border-radius: 50%;
    padding: 2px; 
}
</style>